<template>
  <div class="goods-list-main">
    <div class="goods-list-box" id="tree">
      <waterfall :col="6" :data="GoodsData" @loadmore="loadmore" :isTransition="true" :loadDistance="100">
        <template>
          <div class="goods-con-box pr pbImgBox" v-for="(item,index) in GoodsData" :key="index">
            <img :src="item.pict_url" alt=""  @click="toGoodsInfo(index)">
            <p class="goods-title">{{item.title}}</p>
            <div class="goods-con-bot">
              <div>
                <p class="goods-sub del-text">售价</p>
                <p class="goods-price del-text">￥{{item.reserve_price}}</p>
              </div>
              <div>
                <p class="goods-sub">折扣价</p>
                <p class="goods-price goods-price-new">￥{{item.zk_final_price}}</p>
              </div>
              <div>
                <p class="goods-sub">月销</p>
                <p class="goods-sub">{{item.volume}}</p>
              </div>
            </div>
          </div>
        </template>
      </waterfall>
    </div>
  </div>
</template>

<script>
import { getGoodsList } from '@/api/Goods';
import {Loading} from "element-ui";
export default {
  name: "like",
  props: ['likeItemId'],
  data () {
    return {
      count: 0,
      page: 1,
      limit: 12,
      materialId: 13256, //形似推荐物料ID @link https://market.m.taobao.com/app/qn/toutiao-new/index-pc.html#/detail/10628875?_k=gpov9a
      GoodsData: []
    }
  },
  mounted() {
    getGoodsList({
      page: this.page,
      limit: this.limit,
      item_id: this.likeItemId,
      material_id: this.materialId
    }).then(res => {
      this.GoodsData = res;
    })
  },
  methods: {
    loadmore(){
      let loading = Loading.service({
        lock: false,
        text: '商品加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.page = this.page + 1;
      getGoodsList({
        page: this.page,
        limit: this.limit,
        item_id: this.likeItemId,
        material_id: this.materialId
      }).then(res => {
        this.GoodsData = this.GoodsData.concat(res)
      })
      loading.close();
    },
    toGoodsInfo(index){
      //向上滚动效果
      var timer = setInterval(function(){
        let osTop = document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 3);
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
        if(osTop === 0){
          clearInterval(timer);
        }
      },10)
      this.$emit('goodsInfo', this.GoodsData[index]);
    }
  },
}
</script>

<style scoped>
.goods-list-main{
  width: 100%;
  display: flex;
  justify-content: center;
  padding:15px 0px;
}
.goods-list-main .goods-list-box{
  width: 1200px;
  padding:15px 0px;
  box-sizing: border-box;
}
.goods-con-box{
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  box-sizing: border-box;
  padding:5px 10px;
  margin:10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
  0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
  transition: all 0.5s;
}
.goods-con-box:hover {
  box-shadow: none;
}
.goods-con-box img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.goods-con-box .goods-con-bot{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  text-align: center;
}
.goods-con-box .goods-con-bot p{
  font-size: 13px;
}
.goods-con-box .goods-con-bot .goods-sub{
  color:#686868;
}
.goods-con-box .goods-con-bot .goods-price{
  color: #FF4400;
}
.goods-con-box .goods-con-bot .goods-price-new{
  color: #FF4400;
  font-size: 16px;
}
.goods-con-box .goods-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height:20px;
  font-size: 13px;
  padding:2px 3px;
  color: #686868;
}
.del-text{
  text-decoration:line-through;
}
</style>